<template>
  <div class="alter-type flex-boxs flex-align-x-c flex-align-y-c">
      <div class="main">
          <div class="head">编辑类型</div>
          <div class="body">
              <ul>
                  <li class="flex-boxs flex-align-y-c" v-for="item in typesList">
                      <input type="text" v-model="item.typename" /><i class="fa fa-trash-o"></i>
                  </li>
              </ul>
          </div>
          <div class="foot flex-boxs flex-align-x-sb">
              <input type="button" class="bm-btn-5 normal" value="确定" @click="feedback(true)" />
              <input type="button" class="bm-btn-2 normal" value="取消" @click="feedback(false)" />
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props: {
        typesList: {
            type: [Object, Array]
        }
    },
    data () {
        return {
            
        }
    },
    methods: {
        feedback (is) {
            this.$emit('result', is, this.typeName)
        }
    }
}
</script>

<style lang="less" scope>
@import '../assets/style/base/b-gether-var.less';
.alter-type{position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.8);
    .main{flex:0 0 80%; border-radius:@2px; background:#fff;
        .head{height:@35px; padding:0 @15px; line-height:@35px; font-size:@12px; color:#fff; background:@color;}
        .body{padding:@15px;
            li{padding:@5px 0;
                input{height:@30px; line-height:@30px; border:none; border-bottom:1px solid @grey-02;}
                i{flex:0 0 @30px; text-align:right; font-size:@14px;}
            }
        }
        .foot{padding:@5px @15px @15px @15px;
            input{flex:0 0 30%; height:@30px; line-height:@30px;}
        }
    }
}
</style>
